
<template>
  <div id="salvenote">
    <div>
      <span class="title-item">运维任务分派</span>
    </div>
    <a-form-model layout="inline" :model="page" :colon="false" style="margin-bottom: 12px">
        <a-form-model-item label="任务类型">
          <a-select v-model="page.maintenanceType" placeholder="任务类型" style="width: 180px" allowClear>
            <a-select-option value="3"> 校验 </a-select-option>
            <a-select-option value="2"> 校准 </a-select-option>
            <a-select-option value="1"> 巡检 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="查询排口">
          <a-input v-model.trim="page.monitorName" placeholder="请输入排口名称" allow-clear></a-input>
        </a-form-model-item>
        <a-form-model-item label="公司名称">
          <a-input v-model.trim="page.companyName" placeholder="请输入公司名称" allow-clear></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="onSubmit">查询</a-button>
        </a-form-model-item>
        <a-form-model-item style="float: right;margin-right: 0;">
          <a-button type="primary" @click="apportion">新增任务</a-button>
        </a-form-model-item>
    </a-form-model>

    <div class="tableclass">
      <my-table style="min-height: 94%" :data-source="data" :pagination="false" :columns="columns" :rowKey="(record) => record._id">
        <span slot="action" slot-scope="text, action">
          <a-button type="primary" @click="editData(action)" style="margin-left: 10px" size="small">修改任务</a-button>
        </span>
        <template slot="comparatorStatus" slot-scope="text, comparatorStatus">
          <span v-if="comparatorStatus.maintenanceType == 1">巡检</span>
          <span v-else-if="comparatorStatus.maintenanceType == 2">校准</span>
          <span v-else-if="comparatorStatus.maintenanceType == 3">校验</span>
        </template>
      </my-table>

      <div class="bottompage">
        <a-pagination :show-total="(total) => `共 ${total} 条记录`" :item-render="itemRender" v-model="page.current" :total="total" :defaultPageSize="page.size" @change="pagechangeFn" show-less-items/>
      </div>
      <!-- 人员分派 -->
      <a-modal :title="title" :visible="visibleB" :confirm-loading="confirmLoadingB" @cancel="cancelBtnone" closable :footer="null" destroyOnClose :maskClosable="false">
        <a-form-model :model="staffone" ref="staffonerules" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-model-item label="计划开始时间" prop="planStartTime">
            <a-date-picker v-model="staffone.planStartTime" valueFormat="YYYY-MM-DD" placeholder="开始时间" style="width: 100%"/>
          </a-form-model-item>
          <a-form-model-item label="任务类型" prop="maintenanceType">
            <a-select v-model="staffone.maintenanceType" placeholder="任务类型" style="width: 100%" allowClear>
              <a-select-option value="3"> 校验 </a-select-option>
              <a-select-option value="2"> 校准 </a-select-option>
              <a-select-option value="1"> 巡检 </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="排口选择" labelAlign="right" prop="equipmentId">
            <a-tree-select allowClear v-model="staffone.equipmentId" placeholder="排口选择" style="width: 100%" @change="choice" :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="Outlet" :replaceFields="{title: 'name',key: 'id',value: 'id', children: 'overall',}"></a-tree-select>
          </a-form-model-item>
          <a-form-model-item label="间隔天数" prop="interval">
            <a-input allowClear placeholder="间隔天数" v-model.number="staffone.interval" style="width: 100%"/>
          </a-form-model-item>
          <a-form-model-item label="人员分配" prop="userId">
            <a-select placeholder="人员分配" allowClear v-model="staffone.userId" style="width: 100%" mode="multiple">
              <a-select-option v-for="(item, index) in deptList" :key="index" :value="item.userId">{{ item.userName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
        <a-row type="flex" justify="end">
          <a-col :span="6">
            <a-button type="primary" @click="affirm">确认</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="info" @click="cancelBtnone">取消</a-button>
          </a-col>
        </a-row>
      </a-modal>
      <!-- 修改 -->
      <a-modal :title="title" :visible="visibleA" @cancel="cancelBtn" :confirm-loading="confirmLoadingA" closable :footer="null" destroyOnClose :maskClosable="false">
        <a-form-model :model="staff" ref="staffonerules" :rules="rules" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }" :colon="false">
          <a-form-model-item label="计划开始时间" prop="planStartTime">
            <a-date-picker v-model="staff.planStartTime" valueFormat="YYYY-MM-DD" placeholder="开始时间" style="width: 100%"/>
          </a-form-model-item>
          <a-form-model-item label="间隔天数" prop="interval">
            <a-input allowClear placeholder="间隔天数" v-model.number="staff.interval" style="width: 100%"/>
          </a-form-model-item>
          <a-form-model-item label="人员分配" prop="userId">
            <a-select placeholder="人员分配" allowClear :default-value="staff.userId" v-model="staff.userId" style="width: 100%" mode="multiple">
              <a-select-option v-for="(item, index) in deptList" :key="index" :value="item.userId">{{ item.userName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
        <a-row type="flex" justify="end">
          <a-col :span="6">
            <a-button type="primary" @click="confirmSend">确认</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="cancelBtn">取消</a-button>
          </a-col>
        </a-row>
      </a-modal>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { log } from "video.js";
export default {
  data() {
    return {
      form: {},
      userList: [],
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          width: 100,
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },
        {
          title: "公司名称",
          dataIndex: "companyName",
          align: "center",
        },
        {
          title: "排口名称",
          dataIndex: "monitorName",
          align: "center",
        },
        {
          title: "分配人",
          dataIndex: "userName",
          align: "center",
        },
        {
          title: "开始时间",
          dataIndex: "planStartTime",
          align: "center",
        },
        {
          title: "类型",
          dataIndex: "",
          width: 100,
          scopedSlots: { customRender: "comparatorStatus" },
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      data: [],
      id: "",
      title: "",
      moment,
      page: {
        current: 1,
        size: 10,
        monitorName: "",
        maintenanceType: undefined,
        companyName:"",
      },
      total: 0,
      dept: {
        current: 1, //获取人员数据
        size: 200,
        roleId: "",
      },
      deptList: [], //用户ID
      //详情弹出框
      visible: false,
      visibleA: false,
      visibleB: false,
      confirmLoading: false,
      confirmLoadingA: false,
      confirmLoadingB: false,
      //表格数据
      list: [],
      //详情数据
      detail: [],
      area: "",
      //人员分派
      staffone: {
        equipmentId: undefined,
        planStartTime: moment(),
        equipmentName: "",
        interval: "",
        maintenanceType: undefined,
        userId: [],
      },
      staff: {
        equipmentId: "",
        planStartTime: "",
        equipmentName: "",
        interval: "",
        maintenanceType: "",
        userId: [],
      },
      rules:{
        equipmentId: [{required:true,message:"排口必选",trigger:["blue","change"]}],
        planStartTime: [{required:true,message:"计划开始时间必填",trigger:["blue","change"]}],
        equipmentName: [{required:true,message:"排口名称必填",trigger:["blue","change"]}],
        interval: [{required:true,message:"间隔天数必填",trigger:["blue","change"]},{type:'number',message: "请输入数字",trigger: ["blue","change"]}],
        maintenanceType: [{required:true,message:"任务类型必选",trigger:["blue","change"]}],
        userId: [{type: 'array',required:true,message:"人员分配必选",trigger:["blue","change"]}],
      },
      //排口
      Outlet: [],
    };
  },

  methods: {
    choice(title, key) {
      this.staffone.equipmentName = key;
      // this.staffone.equipmentId = title;
      this.getDeptone();
    },
    //查询
    onSubmit() {
      this.page.current = 1;
      this.getdata();
    },
    //分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getdata();
    },
    //人员分配
    apportion() {
      this.title = "人员分配";
      this.visibleB = true;
    },
    //获取ID用户名
    getDept() {
      this.$api.findUserNameByEquipmentId(this.staff.equipmentId).then((res) => {
          this.deptList = [];
          this.deptList = res.data.data;
        });
    },
    getDeptone() {
      this.$api.findUserNameByEquipmentId(this.staffone.equipmentId).then((res) => {
          this.deptList = [];
          this.deptList = res.data.data;
        });
    },
    //获取部门
    recursion(data) {
      data.forEach((v) => {
        if (v.type != 3) {
          v.selectable = false;
          this.recursion(v.overall);
        }
      });
      return data;
    },
    paikou() {
      this.$api.saveChoiceEquipmentPo().then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          let data = res.data.data;
          let _list = this.recursion(data);
          this.Outlet = [];
          this.Outlet = _list;
        }
      });
    },
    //编辑按钮
    editData(data) {
      this.title = "修改任务";
      this.visibleA = true;
      this.staff.planStartTime = data.planStartTime;
      this.staff.interval = Number(data.interval)?Number(data.interval):data.interval;
      this.staff.userId = data.userId.split(";");
      this.staff.equipmentId = data.id;
      this.staff.equipmentName = data.monitorName;
      this.staff.maintenanceType = data.maintenanceType;
      this.getDept();
    },
    //获取数据
    getdata() {
      var that = this;
      this.$api.task_findEquipmentInfoListPoByPage(this.page).then((res) => {
        if (res.data.code == 0) {
          let result = res.data.data;
          this.data = [];
          result.forEach((item, index) => {
            item._id = index;
            if (item.planStartTime === null) {
              item.planStartTime = "-";
            } else {
              item.planStartTime = moment(parseInt(item.planStartTime)).format(
                "YYYY/MM/DD"
              );
            }
            if (item.planEndTime === null) {
              item.planEndTime = "-";
            } else {
              item.planEndTime = moment(parseInt(item.planEndTime)).format(
                "YYYY/MM/DD"
              );
            }
          });
          this.data = result;
          this.total = res.data.total;
          this.userList = res.data.data;
          // this.id = res.data.data.id;
        }
      });
    },
    //取消按钮
    cancelBtn() {
      this.visibleA = false;
      this.deptList = [];
    },
    cancelBtnone() {
      this.visibleB = false;
      this.staffone = {
        equipmentId: undefined,
        planStartTime: moment(),
        equipmentName: "",
        interval: "",
        maintenanceType: undefined,
        userId: [],
      };
      this.deptList = [];
    },
    //修改任务
    confirmSend() {
      this.$refs.staffonerules.validate(valid=>{
        if (valid){
          let planStartTime = moment(this.staff.planStartTime).add(this.staff.interval,'d')
          let isTime = moment().isAfter(planStartTime);
          if(isTime){
            this.$message.info("任务结束时间最短截止为明日");
            return
          }
          var Rectang = JSON.parse(JSON.stringify(this.staff)); //深拷贝
          Rectang.userId = this.staff.userId.join(";");
          Rectang.planStartTime = new Date(Rectang.planStartTime).getTime();
          Rectang.equipmentName = Rectang.equipmentName.toString();
          console.log(Rectang);
          this.$api.task_updateMaintenanceInstall(Rectang).then((res) => {
            if(res.data.code === 0){
              this.visibleA = false;
              this.$message.info("修改任务成功");
              this.deptList = [];
              this.getdata();
            }else if(res.data.code === 500){
              this.$message.info(res.data.errorMessage)
            }else {
              this.$message.info(res.data.errorMessage)
            }
          });
        }
      })
    },
    //新增任务
    affirm() {
      this.$refs.staffonerules.validate(valid=>{
        if(valid){
          let planStartTime = moment(this.staffone.planStartTime).add(this.staffone.interval,'d')
          let isTime = moment().isAfter(planStartTime);
          if(isTime){
            this.$message.info("任务结束时间最短截止为明日");
            return
          }
          var Rectang = JSON.parse(JSON.stringify(this.staffone)); //深拷贝
          Rectang.userId = this.staffone.userId.join(";");
          Rectang.planStartTime = new Date(Rectang.planStartTime).getTime();
          Rectang.equipmentName = Rectang.equipmentName.toString();
          console.log(Rectang);
          this.$api.task_insertMaintenanceInstall(Rectang).then((res) => {
            if (res.data.code == 0) {
              this.visibleB = false;
              this.$message.info("新建任务成功");
              this.staffone = {
                equipmentId: undefined,
                planStartTime: moment(),
                equipmentName: "",
                interval: "",
                maintenanceType: undefined,
                userId: [],
              };
              this.deptList = [];
              this.getdata();
            } else {
              this.$message.info(res.data.errorMessage);
              return;
            }
          });
        }
      })
    },
  },
  mounted() {
    this.getdata();
    this.paikou();
  },
};
</script>
<style scoped src="../../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.ant-row-flex-end {
  margin-top: 30px;
}

#salvenote {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}

::v-deep#salvenote .ant-table table {
  height: auto;
  border-radius: 0;
}
.bottompage {
  margin-top: 12px;
  float: right;
}
//#salvenote ::v-deep .ant-checkbox-inner {
//  border: 2px solid #2e9685;
//  background-color: rgba(140, 179, 174, 0.5) !important;
//}
//#salvenote .ant-pagination-prev .ant-pagination-item-link,
//.ant-pagination-next .ant-pagination-item-link {
//  border: 0;
//  background-color: rgba(30, 50, 48, 0.5);
//  box-shadow: 0 0 10px 1px #188471 inset;
//}

//.ant-pagination {
//  color: #bebebe;
//}
//.ant-form-item {
//  color: #bebebe;
//}
// 详情
::v-deep #salvenote .ant-form-item-children {
  color: rgba(255, 255, 255, 0.7);
}
</style>

